<template>
  <el-drawer
    v-model="visible"
    title="销售订单详情"
    direction="rtl"
    size="800px"
    :before-close="handleClose"
    class="sales-order-detail-drawer"
  >
    <div class="sales-order-detail" v-if="order">
      <el-tabs v-model="activeTab" class="detail-tabs">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border class="detail-descriptions">
            <el-descriptions-item label="订单号" :span="2">
              {{ order.orderNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="客户">
              {{ order.customerName }}
            </el-descriptions-item>
            <el-descriptions-item label="订单金额">
              ¥{{ order.orderAmount.toLocaleString() }}
            </el-descriptions-item>
            <el-descriptions-item label="订单状态">
              <el-tag :type="getOrderStatusType(order.orderStatus)" class="status-tag">
                {{ getOrderStatusText(order.orderStatus) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="销售人员">
              {{ order.salesperson }}
            </el-descriptions-item>
            <el-descriptions-item label="发票状态">
              <el-tag :type="getInvoiceStatusType(order.invoiceStatus)" class="status-tag">
                {{ getInvoiceStatusText(order.invoiceStatus) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="是否赠品">
              <el-tag :type="order.isGift ? 'success' : 'info'" class="gift-tag">
                {{ order.isGift ? '是' : '否' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ order.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">
              {{ order.remark || '无' }}
            </el-descriptions-item>
          </el-descriptions>
          
          <el-divider>订单商品</el-divider>
          <el-table :data="orderItems" style="width: 100%" class="order-items-table">
            <el-table-column prop="productName" label="商品名称" width="180" />
            <el-table-column prop="sku" label="SKU" width="120" />
            <el-table-column prop="quantity" label="数量" width="80" />
            <el-table-column prop="unitPrice" label="单价" width="100">
              <template #default="scope">
                ¥{{ scope.row.unitPrice.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="subtotal" label="小计" width="100">
              <template #default="scope">
                ¥{{ scope.row.subtotal.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="物流信息" name="logistics">
          <el-timeline class="logistics-timeline">
            <el-timeline-item
              v-for="(activity, index) in logisticsActivities"
              :key="index"
              :timestamp="activity.timestamp"
              :type="activity.type"
            >
              {{ activity.content }}
              <div v-if="activity.remark" class="activity-remark">
                {{ activity.remark }}
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        
        <el-tab-pane label="发票信息" name="invoice">
          <el-table :data="invoices" style="width: 100%" class="invoice-table">
            <el-table-column prop="invoiceNumber" label="发票编号" width="150" />
            <el-table-column prop="invoiceType" label="发票类型" width="100" />
            <el-table-column prop="amount" label="发票金额" width="120">
              <template #default="scope">
                ¥{{ scope.row.amount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="issueDate" label="开票日期" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getInvoiceStatusType(scope.row.status)" class="status-tag">
                  {{ getInvoiceStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button size="small" type="primary" class="table-action-btn">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="操作记录" name="operations">
          <el-table :data="operationLogs" style="width: 100%" class="operations-table">
            <el-table-column prop="operator" label="操作人" width="120" />
            <el-table-column prop="operation" label="操作" width="150" />
            <el-table-column prop="time" label="操作时间" width="150" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits } from 'vue'

interface SalesOrder {
  id: number
  orderNumber: string
  customerName: string
  orderAmount: number
  orderStatus: string
  salesperson: string
  invoiceStatus: string
  isGift: boolean
  createTime: string
  remark: string
}

interface OrderItem {
  id: number
  productName: string
  sku: string
  quantity: number
  unitPrice: number
  subtotal: number
  remark: string
}

interface LogisticsActivity {
  timestamp: string
  content: string
  type: '' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
  remark: string
}

interface Invoice {
  id: number
  invoiceNumber: string
  invoiceType: string
  amount: number
  issueDate: string
  status: string
  remark: string
}

interface OperationLog {
  id: number
  operator: string
  operation: string
  time: string
  remark: string
}

const props = defineProps<{
  modelValue: boolean
  order: SalesOrder | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const activeTab = ref('basic')

const orderItems = ref<OrderItem[]>([
  {
    id: 1,
    productName: '高性能计算服务器',
    sku: 'SKU001',
    quantity: 2,
    unitPrice: 50000,
    subtotal: 100000,
    remark: '配置：Intel Xeon E5-2680 v4, 64GB RAM, 2TB SSD'
  }
])

const logisticsActivities = ref<LogisticsActivity[]>([
  {
    timestamp: '2023-01-05 14:30',
    content: '订单已创建',
    type: 'success',
    remark: ''
  },
  {
    timestamp: '2023-01-06 09:15',
    content: '订单已付款',
    type: 'success',
    remark: ''
  },
  {
    timestamp: '2023-01-07 16:45',
    content: '订单已发货',
    type: 'primary',
    remark: '快递单号：SF1234567890'
  }
])

const invoices = ref<Invoice[]>([
  {
    id: 1,
    invoiceNumber: 'INV20230101001',
    invoiceType: '增值税专用发票',
    amount: 100000,
    issueDate: '2023-01-06',
    status: 'sent',
    remark: '已寄送'
  }
])

const operationLogs = ref<OperationLog[]>([
  {
    id: 1,
    operator: '张三',
    operation: '创建订单',
    time: '2023-01-05 14:30',
    remark: '客户：阿里巴巴集团'
  },
  {
    id: 2,
    operator: '李四',
    operation: '确认付款',
    time: '2023-01-06 09:15',
    remark: '通过支付宝付款'
  }
])

const handleClose = () => {
  visible.value = false
  emit('close')
}

const getOrderStatusType = (status: string) => {
  switch (status) {
    case 'pending_payment': return 'info'
    case 'paid': return 'primary'
    case 'shipped': return 'warning'
    case 'completed': return 'success'
    case 'cancelled': return 'danger'
    case 'refunded': return 'danger'
    default: return 'info'
  }
}

const getOrderStatusText = (status: string) => {
  switch (status) {
    case 'pending_payment': return '待付款'
    case 'paid': return '已付款'
    case 'shipped': return '已发货'
    case 'completed': return '已完成'
    case 'cancelled': return '已取消'
    case 'refunded': return '已退款'
    default: return '未知'
  }
}

const getInvoiceStatusType = (status: string) => {
  switch (status) {
    case 'uninvoiced': return 'info'
    case 'invoiced': return 'warning'
    case 'sent': return 'success'
    default: return 'info'
  }
}

const getInvoiceStatusText = (status: string) => {
  switch (status) {
    case 'uninvoiced': return '未开票'
    case 'invoiced': return '已开票'
    case 'sent': return '已寄送'
    default: return '未知'
  }
}
</script>

<style scoped>
.sales-order-detail {
  padding: 20px 0;
}

.el-divider {
  margin: 20px 0;
}

.activity-remark {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
}

/* 抽屉整体样式 */
.sales-order-detail-drawer {
  transition: all 0.3s ease;
}

:deep(.sales-order-detail-drawer .el-drawer__body) {
  padding: 20px;
}

:deep(.sales-order-detail-drawer .el-drawer__header) {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 0;
}

/* 详情描述列表样式 */
.detail-descriptions {
  transition: all 0.3s ease;
}

.detail-descriptions:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 标签悬停效果 */
.status-tag,
.gift-tag {
  transition: all 0.3s ease;
}

.status-tag:hover,
.gift-tag:hover {
  transform: scale(1.05);
}

/* 表格悬停效果 */
.order-items-table,
.invoice-table,
.operations-table {
  transition: all 0.3s ease;
}

.order-items-table:hover,
.invoice-table:hover,
.operations-table:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 表格操作按钮悬停效果 */
.table-action-btn {
  transition: all 0.3s ease;
}

.table-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 时间线样式 */
.logistics-timeline {
  padding-left: 20px;
}

:deep(.logistics-timeline .el-timeline-item__timestamp) {
  color: #909399;
}

/* 标签页悬停效果 */
.detail-tabs {
  transition: all 0.3s ease;
}

:deep(.detail-tabs .el-tabs__item:hover) {
  color: #409eff;
}

:deep(.detail-tabs .el-tabs__item.is-active) {
  color: #409eff;
  font-weight: bold;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .sales-order-detail-drawer {
    width: 95% !important;
  }
  
  :deep(.sales-order-detail-drawer .el-drawer__body) {
    padding: 16px;
  }
  
  .detail-descriptions {
    :deep(.el-descriptions__label) {
      width: 100px !important;
    }
  }
  
  .logistics-timeline {
    padding-left: 10px;
  }
  
  .table-action-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}
</style>